<template>
	<div class="userInfo_page layer">
		<van-nav-bar :title="$t('my.account')" left-arrow @click-left="$router.go(-1)" :border="false" />
		<div class="cell_box">
			<van-cell :title="$t('my.avatar')" is-link>
				<van-uploader :after-read="afterRead" :before-read="beforeRead">
					<img :src="userInfo.avatar" class="up_img" />
				</van-uploader>
			</van-cell>
			<van-cell :title="$t('my.nickname')" is-link @click="$router.push('/setNickname')">
				<div>{{userInfo.nickname}}</div>
			</van-cell>
			<van-cell title="UID">
				<div>
					{{userInfo.uuid}}
					<img src="@/assets/images/home/wallet/copy.png" class="copy"
						@click="$utils.copy(userInfo.uuid);$toast.success($t('success'))" />
				</div>
			</van-cell>
		</div>
	</div>
</template>

<script>
	import {
		commonUpload,
		commonUploadOSS,
		userProfile,
		commonOssConfig,
	} from '@/api/my.js'
	export default {
		components: {},
		data() {
			return {
				ossConfig: {},
				ossClient: {},
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		watch: {},
		mounted() {
			this.getOssConfig()
		},
		methods: {
			async afterRead(file) {
				// console.log('file', file, file.file.name, file.file);
				const day = this.$day().format('YYYYMMDD')
				const ossUrl = process.env.NODE_ENV === 'production' ? this.ossConfig.host : '/ossUrl'
				const suffix = file.file.name.substring(file.file.name.lastIndexOf('.'))
				const fileUrl = `${day}/${this.$utils.guid()}${suffix}`
				let formData = new FormData()
				formData.append('key', fileUrl)
				formData.append('OSSAccessKeyId', this.ossConfig.accessKeyId)
				formData.append('policy', this.ossConfig.policy)
				formData.append('Signature', this.ossConfig.signature)
				formData.append('file', file.file)
				formData.append('success_action_status', 200); //成功后返回的操作码
				// const res = await commonUpload(formData)
				const res = await commonUploadOSS(ossUrl, formData)
				// console.log('oooores:::::::', res);
				if (res && res.status == 200) {
					// 修改个人信息
					const userRes = await userProfile({
						avatar: `${this.ossConfig.host}/${fileUrl}`
					})
					// console.log('userRes', userRes, `${this.ossConfig.host}/${fileUrl}`);
					if (userRes && userRes.code == 1) {
						await this.$store.dispatch('getUserInfo')
						this.$toast.success(userRes.msg)
					} else {
						this.$toast.fail(userRes.msg)
					}
				} else {
					this.$toast.fail(res.msg)
				}
			},
			beforeRead(file) {
				let types = ['image/jpeg', 'image/png'];
				const isImage = types.includes(file.type);
				const isLt3M = file.size / 1024 / 1024 < 3;
				if (!isImage) {
					this.$toast.fail('上传图片只能是 JPG、PNG 格式!');
					return false;
				}
				if (!isLt3M) {
					this.$toast.fail('上传图片大小不能超过 3MB!');
					return false
				}
				return true;
			},
			submit() {},
			async getOssConfig() {
				const res = await commonOssConfig()
				// console.log('res', res, );
				if (res && res.code == 1) {
					this.ossConfig = res.data
					// const OSS = require("ali-oss");
					// this.ossClient = new OSS({
					// 	accessKeyId: this.ossConfig.access_key,
					// 	accessKeySecret: this.ossConfig.access_key_secret,
					// 	bucket: this.ossConfig.bucket,
					// 	region: this.ossConfig.end_point.split('.')[0],
					// 	secure: false, 
					// });
					// console.log('ossClient', this.ossConfig);
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.userInfo_page {
		.cell_box {
			background-color: #3D3D3D;
			border-radius: 16px;
			overflow: hidden;
			margin-bottom: 20px;

			.van-cell {
				background-color: #3D3D3D;
				padding: 13px 20px;
				align-items: flex-end;

				::v-deep .van-cell__title {
					text-align: left;
					color: #fff;
				}

				::v-deep .van-cell__right-icon {
					color: #fff;
				}

				::v-deep .van-cell__value {
					color: #fff;
				}
			}

			.up_img {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				vertical-align: middle;
			}

			.copy {
				width: 14px;
				height: 14px;
				margin-left: 10px;
			}
		}
	}
</style>